<template>
	<view>
		<uni-nav-bar left-icon="left" right-text="新建分组" title="六(一)班" backgroundColor="#3a408c" shadow color="#fff"
			@clickLeft="goReturn" @clickRight="addGroup" />

		<view class="search-bar">
			<uni-search-bar radius="5" placeholder="搜索" clearButton="auto" cancelButton="auto" @confirm="search" />
		</view>


		<view class="invite">
			<uni-list>
				<uni-list-item title="邀请成员加入" showArrow thumb="/static/邀请.png" thumb-size="lg" />
			</uni-list>
		</view>


		<uni-collapse>
			<!-- 	列表循环 -->
			<uni-collapse-item title="学生列表" :show-animation="true">
				<view class="content">

					<uni-list :border="true" v-for="item in studentList">
						<!-- 显示圆形头像 -->
						<uni-list-chat :avatar-circle="true" :title="item.sname" :avatar="item.image" note="您收到一条新的消息"
							:time="item.create_time"></uni-list-chat>
						<!-- 右侧带角标 -->
					</uni-list>

				</view>
			</uni-collapse-item>
		</uni-collapse>
	</view>
</template>

<script>
	import server from "@/util/http.js"
	export default {
		data() {
			return {
				studentList: [],
				title: '',
				classId: ''
			}
		},
		methods: {
			//搜索 调用接口 根据姓名搜索学生信息
			search(e) {
				console.log(e.value);
			},
			goReturn() {
				uni.navigateBack({
					delta: 1
				})
			},
			//新建分组
			addGroup() {
				//console.log('ee')
			},
			//请求数据
			request() {
				server({
					url: `http://127.0.0.1:4523/mock/906666/class?id=${this.classId}`,
					method: 'get',
					success: res => {
						this.studentList = res.data[0].student
						let title = res.data[0].cname;
						//设置页面标题
						this.title = title
					},
					fail: e => {
						console.log(e);
					}
				});
			}
		},
		//页面加载调用接口 根据class页面传来的id 查询  显示班级名 课程名 学生信息（姓名 原始班级 联系方式 头像 等 ）
		onLoad(option) {
			this.classId = option.id;
			this.request();
		},
		//页面下拉刷新重新加载数据
		onPullDownRefresh() {
			this.request();
			setTimeout(() => {
				uni.stopPullDownRefresh();
			}, 500)

		}
	}
</script>

<style scoped>
	>>>.uni-nav-bar-text {
		font-size: 34rpx;
		font-weight: 600;
	}
</style>
